<template>
  <div class="strategy-edit-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>{{ strategyId ? '编辑策略' : '新建策略' }}</span>
        </div>
      </template>
      <el-form ref="strategyForm" :model="strategy" label-width="120px">
        <el-form-item label="策略名称" prop="name" :rules="[{ required: true, message: '请输入策略名称', trigger: 'blur' }]">
          <el-input v-model="strategy.name" placeholder="请输入策略名称" />
        </el-form-item>
        <el-form-item label="策略描述" prop="description">
          <el-input v-model="strategy.description" type="textarea" placeholder="请输入策略描述" />
        </el-form-item>
        <el-form-item label="交易对" prop="symbol" :rules="[{ required: true, message: '请选择交易对', trigger: 'change' }]">
          <el-select v-model="strategy.symbol" placeholder="请选择交易对">
            <el-option label="BTCUSDT" value="BTCUSDT" />
            <el-option label="ETHUSDT" value="ETHUSDT" />
            <el-option label="SOLUSDT" value="SOLUSDT" />
            <el-option label="DOGEUSDT" value="DOGEUSDT" />
          </el-select>
        </el-form-item>
        <el-form-item label="周期" prop="interval" :rules="[{ required: true, message: '请选择周期', trigger: 'change' }]">
          <el-select v-model="strategy.interval" placeholder="请选择周期">
            <el-option label="1分钟" value="1m" />
            <el-option label="5分钟" value="5m" />
            <el-option label="15分钟" value="15m" />
            <el-option label="1小时" value="1h" />
            <el-option label="4小时" value="4h" />
            <el-option label="1天" value="1d" />
          </el-select>
        </el-form-item>
        <el-form-item label="策略参数">
          <div v-for="(param, index) in strategy.params" :key="index" class="param-item">
            <el-input v-model="param.name" placeholder="参数名称" style="width: 150px; margin-right: 10px;" />
            <el-input v-model="param.value" placeholder="参数值" style="width: 150px; margin-right: 10px;" />
            <el-button type="danger" size="small" @click="removeParam(index)">删除</el-button>
          </div>
          <el-button type="primary" size="small" @click="addParam">添加参数</el-button>
        </el-form-item>
        <el-form-item label="策略代码">
          <el-input v-model="strategy.code" type="textarea" placeholder="请输入策略代码" :rows="10" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">保存策略</el-button>
          <el-button @click="resetForm">重置</el-button>
          <el-button @click="goBack">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';


const router = useRouter();
const route = useRoute();
const strategyForm = ref(null);
const strategyId = ref(route.query.id || null);
const strategy = reactive({
  name: '',
  description: '',
  symbol: '',
  interval: '',
  params: [],
  code: ''
});

onMounted(() => {
  if (strategyId.value) {
    // 模拟加载策略详情
    loadStrategyDetails();
  } else {
    // 新增策略，默认添加一个参数
    addParam();
  }
});

function loadStrategyDetails() {
  // 模拟API请求
  setTimeout(() => {
    // 模拟策略详情数据
    strategy.name = 'MACD交叉策略';
    strategy.description = '基于MACD指标的金叉死叉策略';
    strategy.symbol = 'BTCUSDT';
    strategy.interval = '1h';
    strategy.params = [
      { name: 'fastPeriod', value: '12' },
      { name: 'slowPeriod', value: '26' },
      { name: 'signalPeriod', value: '9' }
    ];
    strategy.code = `// MACD交叉策略
function checkMACD(data) {
  const fastMA = calculateMA(data, fastPeriod);
  const slowMA = calculateMA(data, slowPeriod);
  const macd = calculateMACD(fastMA, slowMA);
  const signal = calculateSignal(macd, signalPeriod);
  
  // 金叉
  if (macd[macd.length - 1] > signal[signal.length - 1] && macd[macd.length - 2] < signal[signal.length - 2]) {
    return 'BUY';
  }
  
  // 死叉
  if (macd[macd.length - 1] < signal[signal.length - 1] && macd[macd.length - 2] > signal[signal.length - 2]) {
    return 'SELL';
  }
  
  return 'HOLD';
}`;
  }, 500);
}

function addParam() {
  strategy.params.push({ name: '', value: '' });
}

function removeParam(index) {
  strategy.params.splice(index, 1);
}

function submitForm() {
  strategyForm.value.validate((valid) => {
    if (valid) {
      // 模拟保存策略
      setTimeout(() => {
        ElMessage({
          type: 'success',
          message: strategyId.value ? '策略更新成功' : '策略创建成功'
        });
        router.push('/strategy/list');
      }, 500);
    } else {
      return false;
    }
  });
}

function resetForm() {
  strategyForm.value.resetFields();
}

function goBack() {
  router.push('/strategy/list');
}
</script>

<style scoped>
.strategy-edit-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.param-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
</style>